<template>
  <div>
    <Search
      @click="
        model = {};
        $refs.d.show();
      "
      >添加角色</Search
    >
    <MyTable
      :tp="{ hasChildren: 'hasChildren', children: 'abc' }"
      :cols="cols"
      :data="list"
      :loading="queryLoading"
    >
      <template v-slot:action="{ row }">
        <el-button
          size="mini"
          type="primary"
          @click="
            model = { ...row };
            $refs.d.show();
          "
          >编辑</el-button
        >
        <el-button size="mini" type="danger" @click="delRole(row)"
          >删除</el-button
        >
        <el-button
          size="mini"
          type="warning"
          @click="
            model = { ...row };
            getMenus();
          "
          >分配权限</el-button
        >
      </template>
    </MyTable>
    <DF
      :title="title + '角色'"
      lw="100px"
      :opts="opts"
      v-model="model"
      @confirm="confirm"
      ref="d"
    />
    <MyDialog title="分配权限" ref="dia" @confirm="undateRights">
      <el-tree
        ref="tree"
        :default-checked-keys="keys"
        :data="menus"
        :props="{ label: 'authName', children: 'children' }"
        node-key="id"
        lazy
        show-checkbox
        default-expand-all
      >
      </el-tree>
    </MyDialog>
  </div>
</template>

<script>
import {
  getRoles,
  addRole,
  modifyRole,
  deleteRole,
  getMenuTree,
  assignRights,
} from "api/rights";

export default {
  name: "roles",
  data() {
    return {
      /**
       * 表单配置项
       */
      opts: {
        roleName: {
          title: "角色名称",
          required: true,
          max: 20,
        },
        roleDesc: {
          title: "角色描述",
          required: true,
          max: 50,
        },
      },
      /**
       * 添加修改模型
       */
      model: {},
      /**
       * 列
       */
      cols: [
        {
          title: "",
          type: "expand",
        },
        {
          title: "#",
          type: "index",
        },
        {
          title: "角色名称",
          name: "roleName",
        },
        {
          title: "角色描述",
          name: "roleDesc",
        },
        {
          title: "操作",
          width: 270,
          slot: "action",
        },
      ],
      menus: [],
      keys: [],
    };
  },
  created() {
    this.getRoleList();
  },
  computed: {
    title() {
      return this.model.id ? "修改" : "添加";
    },
  },
  methods: {
    /**
     *修改权限
     */
    async undateRights() {
      const d = this.refs.dia;
      try {
        const tree = this.$refs.tree;
        const keys = [...tree.getCheckedKeys(), ...tree.getHalfCheckedKeys()];
        d.start();
        await assignRights(this.model.id, keys.join(","));
        this.$m.success("权限分配成功");
        d.hide();
      } catch (error) {}
      d.stop();
    },
    /**
     * 获取树形数据
     */
    async getMenus() {
      try {
        this.queryLoading = true;
        this.menus = await getMenuTree();
        this.keys.splice(0, Infinity);
        const deep = (children) => {
          for (const child of children) {
            if (child.children) {
              deep(child.children);
            } else {
              this.keys.push(child.id);
            }
          }
        };
        this.model.children;
        this.$refs.dia.show();
      } catch (error) {}
      this.queryLoading = false;
    },
    /**
     * 删除
     */
    async delRole({ id, roleName }) {
      let res;
      try {
        res = await this.$myConfirm(`您确定要删除【${roleName}】嘛？`);
        await deleteRole(id);
        this.$m.success("删除成功");
        this.getRoleList();
      } catch (error) {}
    },
    /**
     * 提交
     */
    async confirm() {
      const d = this.$refs.d;
      try {
        d.start();
        await (this.model.id ? modifyRole : addRole)(this.model);
        this.$m.success(this.title + "角色成功");
        d.hide();
        this.getRoleList();
      } catch (error) {}
      d.stop();
    },
    /**
     * 获取角色列表
     */
    async getRoleList() {
      try {
        this.queryLoading = true;
        this.list = await getRoles();
      } catch (error) {}
      this.queryLoading = false;
    },
  },
};
</script>

<style scoped >
</style>
